<template>
    <div class="xtx-checkout-page">
      <div class="container">
        <XtxBread>
          <XtxBreadItem to="/">首页</XtxBreadItem>
          <XtxBreadItem to="/cart">购物车</XtxBreadItem>
          <XtxBreadItem >填写订单</XtxBreadItem>
        </XtxBread>
        <!-- 订单详情 -->
        <div class="wrapper"  >
          <!-- 收货地址 -->
          <h3 class="box-title">收货地址</h3>
          <div class="box-body">
            <div class="address">
              <div class="text">
                <!-- <div class="none">您需要先添加收货地址才可提交订单。</div> -->
                <ul >
                  <li><span>收<i/>货<i/>人：</span>{{ defaultAddress.receiver  }}</li>
                  <li><span>联系方式：</span>{{ defaultAddress.contact }}</li>
                  <li><span>收货地址：</span>{{ defaultAddress.fullLocation + defaultAddress.address }}</li>
                </ul>
                <a href="javascript:;" @click="editAddressFn">修改地址</a>
              </div>
              <div class="action">
                <XtxButton class="btn" @click="changeAddressFn">切换地址</XtxButton>
                <XtxButton class="btn" @click="addDialogFn">添加地址</XtxButton>
              </div>
            </div>
          </div>
          <!-- 商品信息 -->
          <h3 class="box-title">商品信息</h3>
          <div class="box-body">
            <table class="goods">
              <thead>
                <tr>
                  <th width="520">商品信息</th>
                  <th width="170">单价</th>
                  <th width="170">数量</th>
                  <th width="170">小计</th>
                  <th width="170">实付</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in info.goods" :key="item.id">
                  <td>
                    <a href="javascript:;" class="info">
                      <img :src="item.picture" alt="">
                      <div class="right">
                        <p>{{ item.name }}</p>
                        <p>{{ item.attrsText }}</p>
                      </div>
                    </a>
                  </td>
                  <td>¥{{ item.price }}</td>
                <td>{{ item.count }}</td>
                <td>¥{{ item.totalPrice }}</td>
                <td>¥{{ item.totalPayPrice }}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <!-- 配送时间 -->
          <h3 class="box-title">配送时间</h3>
          <div class="box-body">
            <a class="my-btn active" href="javascript:;">不限送货时间：周一至周日</a>
            <a class="my-btn" href="javascript:;">工作日送货：周一至周五</a>
            <a class="my-btn" href="javascript:;">双休日、假日送货：周六至周日</a>
          </div>
          <!-- 支付方式 -->
           <h3 class="box-title">支付方式</h3>
          <div class="box-body">
            <a class="my-btn active" href="javascript:;">在线支付</a>
            <a class="my-btn" href="javascript:;">货到付款</a>
            <span style="color:#999">货到付款需付5元手续费</span>
          </div>
          <!-- 金额明细 -->
          <h3 class="box-title">金额明细</h3>
          <div class="box-body" v-if="info.summary">
            <div class="total">
            <dl>
              <dt>商品件数：</dt>
              <dd>{{ info.summary.goodsCount }}件</dd>
            </dl>
            <dl>
              <dt>商品总价：</dt>
              <dd>¥{{ info.summary.totalPrice.toFixed(2) }}</dd>
            </dl>
            <dl>
              <dt>运<i></i>费：</dt>
              <dd>¥{{ info.summary.postFee.toFixed(2) }}</dd>
            </dl>
            <dl>
              <dt>应付总额：</dt>
              <dd class="price">
                ¥{{ info.summary.totalPayPrice.toFixed(2) }}
              </dd>
            </dl>
          </div>
          </div>
          <!-- 提交订单 -->
          <div class="submit">
            <XtxButton type="primary" @click="sendOrder">提交订单</XtxButton>
          </div>
        </div>
        <!-- 编辑地址弹出层 -->
        <AddressEditDialog ref="dialogRef" ></AddressEditDialog>
        <!-- 选择收货地址 -->
      <XtxDialog title="选择收货地址"  v-model:visible="ischouseDialog">
        <div class="text item"
        :class="{active : seleAddress === '' ? defaultAddress.id === obj.id : seleAddress === obj.id }"
         v-for="obj in info.userAddresses"
         :key="obj.id"
         @click="seleAddress = obj.id"
         >
          <ul>
            <li>
              <span>收<i />货<i />人：</span>{{ obj.receiver }}
            </li>
            <li><span>联系方式：</span>{{ obj.contacts }}</li>
            <li><span>收货地址：</span>{{ defaultAddress.fullLocation }} {{defaultAddress.address }}</li>
          </ul>
        </div>
        <template #footer>
          <XtxButton type="gray" style="margin-right: 20px" @click="ischouseDialog = false"> 取消 </XtxButton>
          <XtxButton type="primary" @click="isEnterFn"> 确认 </XtxButton>
        </template>
      </XtxDialog>
      </div>
    </div>
  </template>
<script>
import { getOrderInfoAPI, createOrderAPI } from '@/api'
import { onMounted, ref, computed } from 'vue'
import AddressEditDialog from './components/addressDialog'
import { useRouter } from 'vue-router'
export default {
  name: 'XtxOrder',
  components: {
    AddressEditDialog
  },
  setup () {
    const info = ref({}) // 存储所有结算数据
    const dialogRef = ref(null) // 添加地址弹出层ref
    const ischouseDialog = ref(false) // 选择地址弹出层显示状态
    const seleAddress = ref('') // 点击地址保存当前点击的ID
    const router = useRouter()
    // 获取结算信息
    onMounted(async () => {
      const res = await getOrderInfoAPI()
      info.value = res.result
    })
    // 默认地址
    const defaultAddress = computed(() => {
      if (info.value.userAddresses) {
        if (info.value.userAddresses.lenght === 0) {
          return {}
        } else {
          const targetAddress = info.value.userAddresses.find(obj => {
            return obj.isDefault === 0
          })
          if (targetAddress) {
            return targetAddress
          } else {
            return info.value.userAddresses[0]
          }
        }
      } else {
        return {}
      }
    })
    // 点击事件--添加地址
    const addDialogFn = () => {
      dialogRef.value.open()
    }
    // 点击事件--切换地址
    const changeAddressFn = () => {
      ischouseDialog.value = true // 打开弹出框
      seleAddress.value = '' // 清空上一次存储的点击状态
    }
    //  点击事件--确认选择的收货地址
    const isEnterFn = () => {
      const target = info.value.userAddresses.find(obj => obj.id === seleAddress.value)
      target.isDefault = 0
      ischouseDialog.value = false
    }
    // 点击事件 -- 修改地址
    const editAddressFn = () => {
      dialogRef.value.open(defaultAddress.value)
    }
    // 提交订单
    const sendOrder = async () => {
      const res = await createOrderAPI({
        deliveryTimeType: 1,
        payType: 1,
        payChannel: 1,
        buyerMessage: '',
        goods: info.value.goods.map(item => ({
          skuId: item.skuId,
          count: item.count
        })),
        addressId: seleAddress.value === '' ? defaultAddress.value.id : seleAddress.value
      })
      console.log(res.result)
      router.push(`/user/pay?id=${res.result.id}`)
    }
    return {
      defaultAddress,
      info,
      dialogRef,
      addDialogFn,
      ischouseDialog,
      seleAddress,
      changeAddressFn,
      isEnterFn,
      editAddressFn,
      sendOrder
    }
  }
}
</script>
  <style scoped lang="less">
  .xtx-checkout-page {
    .wrapper {
      background: #fff;
      padding: 0 20px;
      .box-title {
        font-size: 16px;
        font-weight: normal;
        padding-left: 10px;
        line-height: 70px;
        border-bottom: 1px solid #f5f5f5;
      }
      .box-body {
        padding: 20px 0;
      }
    }
  }
  .address {
    border: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    .text {
      flex: 1;
      min-height: 90px;
      display: flex;
      align-items: center;
      .none {
        line-height: 90px;
        color: #999;
        text-align: center;
        width: 100%;
      }
      > ul {
        flex: 1;
        padding: 20px;
        li {
          line-height: 30px;
          span {
            color: #999;
            margin-right: 5px;
            > i {
              width: 0.5em;
              display: inline-block;
            }
          }
        }
      }
      > a {
        color: var(--xtx-color);
        width: 160px;
        text-align: center;
        height: 90px;
        line-height: 90px;
        border-right: 1px solid #f5f5f5;
      }
    }
    .action {
      width: 420px;
      text-align: center;
      .btn {
        width: 140px;
        height: 46px;
        line-height: 44px;
        font-size: 14px;
        &:first-child {
          margin-right: 10px;
        }
      }
    }
  }
  .goods {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    .info {
      display: flex;
      text-align: left;
      img {
        width: 70px;
        height: 70px;
        margin-right: 20px;
      }
      .right {
        line-height: 24px;
        p {
          &:last-child {
            color: #999;
          }
        }
      }
    }
    tr {
      th {
        background: #f5f5f5;
        font-weight: normal;
      }
      td,th {
        text-align: center;
        padding: 20px;
        border-bottom: 1px solid #f5f5f5;
        &:first-child {
          border-left: 1px solid #f5f5f5;
        }
        &:last-child {
          border-right: 1px solid #f5f5f5;
        }
      }
    }
  }
  .my-btn {
    width: 228px;
    height: 50px;
    border: 1px solid #e4e4e4;
    text-align: center;
    line-height: 48px;
    margin-right: 25px;
    color: #666666;
    display: inline-block;
    &.active,&:hover {
      border-color: var(--xtx-color);
    }
  }
  .total {
    dl {
      display: flex;
      justify-content: flex-end;
      line-height: 50px;
      dt {
        i {
          display: inline-block;
          width: 2em;
        }
      }
      dd {
        width: 240px;
        text-align: right;
        padding-right: 70px;
        &.price {
          font-size: 20px;
          color: var(--price-color);
        }
      }
    }
  }
  .submit {
    text-align: right;
    padding: 60px;
    border-top: 1px solid #f5f5f5;
  }
  .xtx-dialog {
  :deep(.wrapper) {
    max-height: 100%;
    overflow-y: auto;
    .body {
      font-size: 14px;
    }
  }
  .text {
    flex: 1;
    min-height: 90px;
    display: flex;
    align-items: center;
    &.item {
      border: 1px solid #f5f5f5;
      margin-bottom: 10px;
      cursor: pointer;
      &.active,
      &:hover {
        border-color: var(--xtx-color);
        background: lighten(#3eaf7c, 50%);
      }
      > ul {
        padding: 10px;
        font-size: 14px;
        line-height: 30px;
        i {
          width: 0.5em;
          display: inline-block;
        }
      }
    }
  }
}
  </style>
